<template>
  <div class="certificate">
    <form :action="post_url" id="form" method="post">
      <input type="hidden" name="sign_info" v-model="sign">
      <input type="hidden" name="nick_name" v-model="nick_name">
      <input type="hidden" name="return_url" v-model="return_url">
      <input type="hidden" name="remark" v-model="remark">
      <input type="hidden" name="number_id" v-model="number_id">
      <input type="hidden" name="advice_url" v-model="advice_url">
      <input type="hidden" name="account_name" v-model="account_name">
      <input type="hidden" name="mode" v-model="mode">
      <input type="hidden" name="real_name" v-model="real_name">
      <input type="hidden" name="card_no" v-model="card_no">
    </form>
    <div class="realname border-1px">
      <span>真实姓名</span>
      <input type="text" placeholder="请输入您的真实姓名" v-model="real_name">        
    </div>
    <div class="idcard border-1px">
      <span>身份证号</span>
      <input type="text" placeholder="请输入您的身份证号" v-model="card_no">
    </div>
    <div @click="goAuth" class="certificate-btn">
      <vbutton text="立即认证" :loading="loading"></vbutton>
    </div>

  </div>
</template>

<script>
  import { Toast, Spinner } from 'mint-ui'
  import vmask from 'components/common/mask'
  import { isIdCardNo } from '@/tool/check.js'
  import vbutton from 'components/common/button'

  export default {
    data () {
      return {
        loading: false,
        post_url: '',
        real_name: '',
        card_no: '',
        sign: '',
        nick_name: '',
        return_url: '',
        remark: '',
        number_id: '',
        advice_url: '',
        account_name: '',
        mode: ''
      }
    },
    methods: {
      goAuth () {
        const userAcctKey = this.$route.query.acctkey
        console.log(userAcctKey)
        if (this.real_name === '') {
          Toast('请输入正确的姓名')
          return
        }
        if (isIdCardNo(this.card_no) === false) {
          Toast('请输入合法的身份证号')
          return
        }
        this.loading = true
        this.$http.get('/api/user/openAcct?acctKey=' + userAcctKey + '&realName=' + this.real_name + '&cardNo=' + this.card_no)
          .then((response) => {
            const returnData = response.data.data

            this.sign = returnData.sign
            this.nick_name = returnData.nick_name
            this.return_url = returnData.return_url
            this.remark = returnData.remark
            this.number_id = returnData.number_id
            this.advice_url = returnData.advice_url
            this.post_url = returnData.post_url
            this.account_name = returnData.account_name
            this.mode = returnData.mode
          })
        .then(() => {
          var form = document.getElementById('form')
          form.action = this.post_url
          form.submit()
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
      }
    },
    components: {
      vbutton,
      Toast,
      Spinner,
      vmask
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .certificate {
    font-size: 30px;
    .realname,
    .idcard {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 110px;
      width: 100%;
      padding: 0 30px;
      margin: 0 auto;
      @include border-1px(#{$base-e5e5e5});
      input {
        outline: none;
        flex: 1 0 auto;
        text-align: right;
      }
    }
    &-btn {
      text-align: center;
      margin: 70px 0 50px 0;
    }
  }
</style>
